Ionic এর Camera API ব্যবহার করে আপনি মোবাইল ডিভাইসের ক্যামেরা থেকে ছবি বা ভিডিও ক্যাপচার করতে পারেন। Ionic ফ্রেমওয়ার্কে ক্যামেরা ইন্টিগ্রেট করার জন্য Cordova Camera Plugin বা Capacitor Camera Plugin ব্যবহার করা হয়, যা আপনাকে মোবাইল ডিভাইসের ক্যামেরা এক্সেস করতে এবং ছবি বা ভিডিও গ্রহণ করতে সহায়তা করে।
নিচে Ionic Camera API Integration এর ধাপসমূহ দেখানো হলো, যেখানে Cordova এবং Capacitor উভয় প্ল্যাটফর্মের জন্য কোড দেয়া হয়েছে।
1. Install the Camera Plugin
১.১ Capacitor Camera Plugin (Recommended for New Projects)
Capacitor হল Ionic এর নতুন এবং আধুনিক প্ল্যাটফর্ম যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। Capacitor Camera Plugin ব্যবহারের জন্য নিচের কমান্ডটি ব্যবহার করুন:
npm install @capacitor/camera
npx cap sync
১.২ Cordova Camera Plugin (Old Approach)
যদি আপনি Cordova ব্যবহার করতে চান, তবে Cordova Camera Plugin ইনস্টল করতে হবে:
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
এটি Camera প্লাগইনটি ইন্সটল করবে, যা ক্যামেরা এক্সেস করতে ব্যবহৃত হয়।
2. Import the Required Modules
২.১ Capacitor Camera
Capacitor ব্যবহার করলে, প্রথমে Camera প্লাগইনটি ইনস্টল করার পর এটি ইম্পোর্ট করতে হবে:
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
২.২ Cordova Camera
Cordova ব্যবহার করলে, Camera এবং CameraOptions ইম্পোর্ট করতে হবে:
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
3. Using the Camera API to Capture a Photo
৩.১ Capture Photo with Capacitor Camera Plugin
Capacitor ক্যামেরা প্লাগইন ব্যবহার করে ছবি ক্যাপচার করতে নিচের কোডটি ব্যবহার করুন:
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
async captureImage() {
const image = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri, // Image URI (base64 or file path)
source: CameraSource.Camera, // Use the camera for capturing image
allowEditing: true, // Allow editing the image
saveToGallery: true // Save the captured image to gallery
});
console.log('Captured image URI:', image.webPath);
this.imageUrl = image.webPath; // Store the image URI for use
}
কোডের ব্যাখ্যা:
- quality: ছবির গুণগত মান নির্ধারণ করে।
- resultType: আপনি যেটি চান (ছবি URI বা base64 স্ট্রিং) নির্বাচন করতে পারেন। এখানে
CameraResultType.Uriনির্বাচন করা হয়েছে। - source:
CameraSource.Cameraব্যবহার করলে ক্যামেরা থেকে ছবি নেওয়া হবে, এবংCameraSource.Photosব্যবহার করলে ফটো লাইব্রেরি থেকে ছবি নেওয়া যাবে। - allowEditing: ছবি এডিট করার জন্য অনুমতি।
- saveToGallery: ছবি গ্যালারিতে সংরক্ষণ করবে।
৩.২ Capture Photo with Cordova Camera Plugin
Cordova প্লাগইন ব্যবহার করলে কোড হবে:
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
constructor(private camera: Camera) {}
captureImage() {
const options: CameraOptions = {
quality: 90,
destinationType: this.camera.DestinationType.FILE_URI, // Return file URI
sourceType: this.camera.PictureSourceType.CAMERA, // Use the camera to capture the image
allowEdit: true, // Allow editing
saveToPhotoAlbum: true, // Save to photo album
};
this.camera.getPicture(options).then((imageData) => {
console.log('Captured image URI:', imageData);
this.imageUrl = imageData; // Use the captured image URI
}, (err) => {
console.error('Error capturing image:', err);
});
}
কোডের ব্যাখ্যা:
- quality: ছবির গুণগত মান নির্ধারণ।
- destinationType: এখানে
FILE_URIব্যবহার করা হয়েছে, যা ছবি ফাইলের URI ফেরত দেয়। - sourceType: ক্যামেরা থেকে ছবি নিতে
PictureSourceType.CAMERAব্যবহার করা হয়। - allowEdit: ছবি এডিট করার জন্য অনুমতি।
- saveToPhotoAlbum: ছবি অ্যালবামে সংরক্ষণ করার জন্য সেট করা হয়।
4. Using the Captured Image
যখন ছবি সফলভাবে ক্যাপচার করা হবে, তখন আপনি এই ছবি ইন্টারফেসে প্রদর্শন করতে পারেন। এখানে কিভাবে ছবি প্রদর্শন করবেন তা দেখানো হলো:
<ion-img [src]="imageUrl"></ion-img>
এবং TypeScript ফাইলে:
export class HomePage {
imageUrl: string;
constructor() {
this.imageUrl = '';
}
// Capture Image Function Here
}
এটি ক্যাপচার করা ছবিটি ion-img কম্পোনেন্টে প্রদর্শন করবে।
5. Handling Permissions
৫.১ Permissions for Camera (Capacitor)
Capacitor ক্যামেরা প্লাগইন ব্যবহারের জন্য, iOS এবং Android এর জন্য ক্যামেরা এক্সেস অনুমতি প্রয়োজন হতে পারে। Capacitor ডিফল্টভাবে ক্যামেরা অ্যাক্সেসের জন্য পারমিশন ম্যানেজমেন্ট প্রদান করে না, তবে আপনি @capacitor/core থেকে Permissions প্লাগইন ব্যবহার করতে পারেন।
npm install @capacitor/permissions
npx cap sync
এবং কোডে অনুমতি চেক করতে পারেন:
import { Permissions } from '@capacitor/core';
async checkCameraPermission() {
const permission = await Permissions.query({ name: 'camera' });
if (permission.state === 'granted') {
// Permission granted, proceed with camera usage
} else {
// Request permission or show a message to the user
}
}
৫.২ Permissions for Camera (Cordova)
Cordova ব্যবহার করলে, cordova-plugin-android-permissions প্লাগইন ব্যবহার করে ক্যামেরা পারমিশন ম্যানেজ করা যেতে পারে।
ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions
তারপর কোডে পারমিশন চেক করতে পারেন:
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
constructor(private androidPermissions: AndroidPermissions) {}
checkPermission() {
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
result => {
if (result.hasPermission) {
console.log('Camera permission granted');
} else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA);
}
}
);
}
সারাংশ
Ionic অ্যাপে Camera API ব্যবহার করে আপনি মোবাইল ডিভাইসের ক্যামেরা থেকে ছবি বা ভিডিও ক্যাপচার করতে পারেন। Capacitor Camera Plugin বা Cordova Camera Plugin এর মাধ্যমে এটি সহজেই ইন্টিগ্রেট করা সম্ভব। আপনি ছবির গুণগত মান, ফাইল ফরম্যাট এবং এডিটিং অপশন কাস্টমাইজ করতে পারবেন। ক্যামেরা পারমিশনও ম্যানেজ করতে হবে, যা উভয় প্ল্যাটফর্মে (Android ও iOS) ব্যবহৃত হয়।
Read more
